<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的社团</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/util.js"></script>
    <link href="css/bootstrap.css">
<!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
    #clubData{
        width: 1100px;
        margin: auto;
    }
    #clubName{
        padding: 20px;
        height: 80px;
    }
    #clubName>div:first-child{
        font-size: 20px;
        font-weight: bold;
        line-height: 40px;
        width: 500px;
        float: left;
    }
    #clubImage{
        padding: 20px;
    }
    /*去浮动*/
    .clear:after {
        content: "";
        display: block;
        clear: both;
    }
    .fonts{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<body>
<div id="clubData">
    <div id="clubName" class="clear">
        <div>{{club.clubName}}</div>
        <div style="float: right;width: 100px">
            <input type="button" class="btn btn-danger" value="退出社团" @click="removeStudents()">
        </div>
    </div>
    <hr>
    <div id="clubImage">
        <img :src="'img/'+club.clubHead" width="600px" height="400px" style="margin-left: 240px">
    </div>
    <div>
        <div style="font-size: 18px;font-weight: bold;">社团简介</div>
        <div style="margin-left: 100px">
            <input type="text" :value="club.clubIntroduction" disabled style="height: 100px;width: 1000px">
        </div>
    </div>
    <div>
        <div style="font-size: 18px;font-weight: bold;">社团公告</div>
        <div v-for="(i, index) in announcement" @click="showAnn(i)" style="cursor: pointer;" class="clear">
            <div style="float: left;padding: 20px;font-size: 13px;color: gray;width: 400px;" class="fonts">{{i.announcementValue}}</div>
            <div style="float: right;padding: 20px;font-size: 13px;color: gray">{{ formatDate(i.announcementDate) }}</div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">公告详情</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="close()"></button>
                </div>
                <div class="modal-body">
                    {{ selectedAnnouncement.announcementValue }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="close()">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div style="height: 100px"></div>
</div>
</body>
</html>
<script>
    $(function (){
        let clubId=getData().clubId;
        function LoginVerify() {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "loginVerify",
                    type: "get",
                    dataType: "json",
                    success: function(response) {
                        if (response.state == 300) {
                            alert(response.message);
                            window.location.href = "login.html";
                        } else {
                            resolve(response.data.loginUser.studentId);
                        }
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }
        function getRequest(clubId, studentId) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "requestRe/" + studentId + "/" + clubId,
                    type: "get",
                    dataType: "json",
                    success: function(req) {
                        resolve(req.state);
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }
        function ClubStudent(clubId, studentId) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "clubMembers/" + clubId + "/" + studentId,
                    type: "get",
                    dataType: "json",
                    success: function(req) {
                        resolve(req.state);
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        function reRequest(clubId, studentId) {
            $.ajax({
                url: "remove/" + studentId + "/" + clubId,
                type: "get",
                dataType: "json",
                success:function (req){
                    console.log("添加成功")
                }
            });
        }
        $.ajax({
            url: "clubMain/" + clubId,
            type: "get",
            dataType: "json",
            success: function(req) {
                app.club = req.club;
                app.announcement=req.announcement;
                console.log(req.announcement);
                console.log(req);
            }
        });

        let app = new Vue({
            el: "#clubData",
            data: {
                club: {},
                announcement: [],
                selectedAnnouncement: {}
            },
            methods: {
                formatDate(dateString) {
                    const date = new Date(dateString);
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                },
                showAnn(ann) {
                    this.selectedAnnouncement = ann;
                    $('#exampleModal').modal('show');
                },
                close(){
                    $('#exampleModal').modal('hide');
                }, async removeStudents() {
                    // 显示确认框
                    if (confirm("您确定要退出该社团吗？")) {
                        let studentId = await LoginVerify();
                        if (studentId != null) {
                            let b = await ClubStudent(this.club.clubId, studentId);

                            if (b === 400) {
                                let c = await getRequest(this.club.clubId, studentId);
                                if (c === 200) {
                                    reRequest(clubId, studentId); // 假设 reRequest 是退出社团的请求函数
                                    window.alert("已发布退出社团申请");
                                } else {
                                    window.alert("请勿重复发起申请");
                                }
                            }else {
                                window.alert("你不是是该社团的学生");
                            }
                        }
                    }
                }
            }
        })
    })
</script>